<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#FCFCFC',
		navigationBarTextStyle: 'black',
		backgroundColor: '#FCFCFC',
		navigationBarTitleText: '发布共读计划',
	},
}
</route>
<template>
	<view class="page-bookrack">
		<view
			class="w-full flex flex-col box-border pb-[168rpx]"
			style="overflow-y: scroll; background-color: #fcfcfc"
			:style="{ height: contentHeight + 'rpx' }"
		>
			<view class="flex items-center mt-[30rpx]">
				<text class="text-[43rpx] text-[#303030] ml-[48rpx] font-bold">选择班级</text>
				<text class="text-[44rpx] text-[#2BA5E0] ml-[15rpx] font-bold">1</text>
				<text class="text-[37rpx] text-[#2BA5E0] font-bold">/3</text>
			</view>
			<view class="flex items-center mt-[20rpx]">
				<text class="text-[28rpx] text-[#303030] ml-[48rpx]"
					>每个班每个月最多可以发布3个班级共读计划</text
				>
			</view>
			<view
				class="w-[680rpx] ml-[35rpx] releasePlanOne_boxMt"
				:class="currentIndex == index ? 'releasePlanOne_boxAhov' : 'releasePlanOne_box'"
				v-for="(item, index) in classList"
				:key="index"
				@tap="selectClass(index)"
			>
				<image
					class="w-[102rpx] h-[102rpx] rounded-[102rpx] border-3 border-solid border-[#F7CE32] ml-[25rpx] staudenDetails_topLeftBox_image"
					:src="item.avatar || baseImg + '/class.png'"
				/>
				<view class="staudenDetails_topLeftBox">
					<text index="13" class="caption-7">{{ item.class_name }}</text>
					<image
						class="staudenDetails_topRightBox_image staudenDetails_topRightBox_imageAhov"
						:src="baseImg + '/fabuxz.png'"
					/>
					<view class="title-6">
						<text index="12" class="title-8">{{ userInfo.school_name }}</text>
					</view>
				</view>
				<view class="releasePlanOne_bottomBox releasePlanOne_bottomBoxAhov">
					<text class="releasePlanOne_bottomBox_text">{{ item.student_total }}学生</text>
					<text class="releasePlanOne_bottomBox_text">{{ item.plan_total }}个共读计划进行中</text>
				</view>
			</view>
		</view>
		<view index="2" class="container-5">
			<view index="1" src="" class="title-wrapper" @tap="toSecond">
				<text index="0" class="title-9">下一步</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { getClassListApi } from '@/service/plan';
import { useUserStore } from '@/store';
import { usePlanStore } from '@/store/plan';
import { systemInfo } from '@/utils/getSystemInfo';
import { link } from 'fs';
import { storeToRefs } from 'pinia';

const userStore = useUserStore();
const planStore = usePlanStore();
const { userInfo } = storeToRefs(userStore);
const { planInfo } = storeToRefs(planStore);

const { contentHeight } = systemInfo();
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const classList: any = ref([]);
const currentIndex = ref(0);
const getClassList = async () => {
	try {
		const res = await getClassListApi();
		if (res.status_code === 200) {
			const resData = res.data;
			classList.value = resData;
			classList.value.find((item: any, index: number) => {
				if (planInfo.value.class_id === item.id) {
					currentIndex.value = index;
				}
			});

			console.log('========>currentIndex', currentIndex.value);
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPlanPlanformListerror', error);
		uni.hideLoading();
	}
};

const selectClass = (index: number) => {
	currentIndex.value = index;
	//planInfo.value.class_id = classList.value[index].class_id;
};
const toSecond = () => {
	planStore.setPlanInfo({
		...planStore.planInfo,
		class_id: classList.value[currentIndex.value].id,
	});
	uni.navigateTo({
		url: '/pages/releasePlan/two/index',
	});
};
onShow(() => {
	getClassList();
});
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}

.releasePlanOne_boxMt {
	margin-top: 25rpx;
}

.releasePlanOne_boxMt:first-child {
	margin-top: 80rpx;
}

.releasePlanOne_box {
	display: block;
	padding: 35rpx 0 24rpx;
	background: #fff;
	border: #fff 4rpx solid;
	border-radius: 31rpx;
	box-shadow:
		0 0 4rpx 0 rgb(0 0 0 / 3%),
		0 7rpx 20rpx 0 rgb(0 0 0 / 7%);
	.staudenDetails_topRightBox_imageAhov {
		visibility: hidden;
	}
}

.releasePlanOne_boxAhov {
	display: block;
	padding: 35rpx 0 24rpx;
	background: #fff;
	border: #33a3e2 4rpx solid;
	border-radius: 31rpx;
	.staudenDetails_topRightBox_imageAhov {
		visibility: visible;
	}
}

.staudenDetails_topLeftBox_image {
	float: left;
	width: 102rpx;
}

.staudenDetails_topLeftBox {
	float: left;
	width: calc(100% - 160rpx);
	min-height: 114rpx;

	.caption-7 {
		width: calc(100% - 22rpx);
		margin-top: 10rpx;
		margin-left: 22rpx;
		overflow: hidden;
		font-size: 36rpx;
		font-style: normal;
		line-height: 54rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.staudenDetails_topRightBox_image {
		display: none;
		float: right;
		width: 60rpx;
		height: 60rpx;
		margin-top: 70rpx;
		margin-right: 30rpx;
	}

	.staudenDetails_topRightBox_imageAhov {
		display: block;
	}

	.title-6 {
		width: calc(100% - 105rpx);
		margin-left: 22rpx;
		overflow: hidden;
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title-7 {
		float: left;
		height: 50rpx;
		padding: 0 20rpx;
		font-size: 25rpx;
		font-style: normal;
		line-height: 50rpx;
		color: #fff;
		background-color: #2ba5e0;
		border-radius: 10rpx;
	}

	.title-8 {
		float: left;
		font-size: 28rpx;
		font-style: normal;
		line-height: 50rpx;
		color: #909090;
	}
}

.releasePlanOne_bottomBox {
	display: block;
	float: left;
	width: calc(100% - 50rpx);
	margin: 28rpx 0 0 25rpx;

	.releasePlanOne_bottomBox_text {
		display: inline-block;
		height: 62rpx;
		padding: 0 28rpx;
		margin-right: 13rpx;
		font-size: 26rpx;
		line-height: 62rpx;
		color: #34a4e2;
		background-color: #f3f3f5;
		border-radius: 62rpx;
	}
}

.releasePlanOne_bottomBoxAhov {
	margin-top: 10rpx;
}

.container-5 {
	position: fixed;
	bottom: 0;
	left: 0;
	width: calc(100% - 120rpx);
	height: 166rpx;
	padding: 0 60rpx;
	background-color: #fcfcfc;

	.title-wrapper {
		float: left;
		width: 400rpx;
		height: 83rpx;
		margin: 40rpx 0 0 calc((100% - 400rpx) / 2);
		margin-top: 40rpx;
		overflow: hidden;
		font-size: 33rpx;
		line-height: 83rpx;
		color: rgb(255 255 255 / 100%);
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		background-color: #2ba5e0;
		border-radius: 83rpx;
	}
}
</style>
